<template>
  <div class="page-box" style="height: 100%">
    <!-- <div class="top-title" v-if="topTitle">{{ topTitle }}</div> -->
    <div class="chart-box" ref="chart" :style="{ width: '100%', height: '100%' }"></div>
    <div class="top-left fixed-item">
      <el-tooltip class="item" effect="dark" content="权重低，盈利的病组。需要加大收治。" placement="top">
        <span>优势病种</span>
      </el-tooltip>
    </div>
    <div class="right-left fixed-item">
      <el-tooltip class="item" effect="dark" content="权重高，盈利的病组。需加大收治。" placement="top">
        <span>战略病种</span>
      </el-tooltip>
    </div>
    <div class="bot-left fixed-item">
      <el-tooltip class="item" effect="dark" content="权重低，亏损的病组。可通过控制住院天数等方式控制费用或向下级医院分流。" placement="top">
        <span>劣势病种</span>
      </el-tooltip>
    </div>
    <div class="bot-right fixed-item">
      <el-tooltip class="item" effect="dark" content="权重高，亏损的病组。虽然存在亏损但高权重才能体现医院的水平。可通过控制住院天数等方式控制费用，尽力扭亏为盈。"
        placement="top">
        <span>关注病种</span>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    chartsData: {
      type: Array,
    },

    width: {
      type: String,
      default: "300",
    },
    height: {
      type: String,
      default: "300",
    },
    title: {
      type: String,
    },
    topTitle: {
      type: String,
    },
    topInfo: {
      type: Object,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  computed: {
    chartsOption() {
      return {
        title: {
          text: this.topTitle,
        },
        tooltip: {
          position: "top",
          formatter: (params) => {
            const title = `<div>病组：${params.value[3]}</div>`;
            const nums = `<div style='margin-top:5px'>人次：${params.value[4]}</div>`;
            const views = `<div style='margin-top:10px'>${params.marker}<span>CMI：${params.value[0]}</span>，次均盈亏：${params.value[1]}</div>`;
            return `${title}${nums}<div>${views}</div>`;
          },
          // trigger: "axis",
          // formatter: (params) => {
          //   const title = `<div>${params[0].axisValueLabel}</div>`;
          //   const views = params
          //     .map(
          //       (v) =>
          //         `<div style='margin-top:10px'>${v.marker}<span>${v.data[3]}</span>：${v.data[1]}</div>`
          //     )
          //     .join("");
          //   return `${title}<div>${views}</div>`;
          // },
        },
        legend: {
          data: ["病组"],
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataZoom: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: "value",
            splitNumber: 4,
            scale: true,
            name: "CMI值",
          },
        ],
        color: ["#0AB2C1", "#65B581", "#ccc", "#ff6600"],
        yAxis: [
          {
            type: "value",
            splitNumber: 4,
            scale: true,
            name: "盈亏",
            // offset: -50,
          },
        ],
        series: [
          {
            name: "病种",
            type: "scatter",
            // symbolSize: function (value) {
            //   return Math.round(value[2] / 5);
            // },
            symbolSize: 15,
            data: this.chartsData,
            symbol: "circle",
            itemStyle: {
              normal: {
                shadowBlur: 5,
                shadowColor: "#cef0f3",
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    fontSize: "18px",
                    fontWeight: "bold"
                  },
                  formatter: (params) => {
                    // console.log(params);
                    return `${params.value[3]}`;
                  },
                },
              },
            },
            markLine: {
              silent: true,

              label: {
                formatter: "平均CMI : {c}",
              },
              // 标记线
              data: [
                {
                  // type: "average",
                  xAxis: this.topInfo
                    ? this.topInfo.CMI
                    : localStorage.getItem("staticInfo").CMI,
                  name: "平均值",
                },
              ],
            },
          },
        ],
      };
    },
  },
  watch: {
    chartsData: {
      immediate: true, //初始化时让handler调用一下
      deep: true, // 开启深度监听
      handler() {
        this.$nextTick(() => {
          setTimeout(() => {
            this.initEcharts();
          }, 500);
        });
      },
    },
  },
  mounted() { },
  methods: {
    //初始化图表
    initEcharts() {
      let myChart = echarts.init(this.$refs.chart);
      myChart.setOption(this.chartsOption);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.top-title {
  text-align: center;
  margin-top: 20px;
}

.page-box {
  position: relative;
}

.fixed-item {
  position: absolute;
  color: red;
}

.top-left {
  top: 50px;
  left: 0;
}

.right-left {
  top: 50px;
  right: 0;
}

.bot-left {
  bottom: 50px;
  left: 0;
}

.bot-right {
  bottom: 50px;
  right: 0;
}
</style>
